<template class="temp_page">

	<myTable :lists="lists" @action_click="table_action_click" @table_change="table_change"></myTable>


	<!-- 配置 -->
	<a-drawer v-model:visible="show_drawer" :title="drawerTitle" :maskClosable="false"
		width="500" :destroyOnClose="true">

		<mlDrawerBody ref="drawerBody" :handle="handleEvent" :data="lists[handel_index]"></mlDrawerBody>


		<template #footer style="text-align: right">
			<a-space>
				<a-button type="primary" @click="submit_drawer">提交</a-button>
				<a-button @click="close_drawer">取消</a-button>
			</a-space>
		</template>

	</a-drawer>



</template>
<script setup lang="ts">
import { defineComponent, ref, reactive, toRaw, computed, onMounted } from "vue";

import myTable from "./my-table.vue"
import mlDrawerBody from "./ml-drawer-body.vue"


import ML_Component from "./components_class/index"
import request from "@/api/index"
import { message, Modal } from "ant-design-vue";



let show_drawer = ref<boolean>(false); // 右抽屉显示隐藏

let lists =  reactive<ML_Component []>([])  // 存放所有模块



// 初始化
const init = () => {

	lists.length = 0
	let allDataList = [
			{compontName: "434",compontType: "",created: null,moduleId: "",remark: "",status: 1,tag: "434",uiType: "",updated: null,_id: "62e88e5d761c0281c79e5970"},
			{compontName: "434",compontType: "",created: null,moduleId: "",remark: "",status: 1,tag: "434",uiType: "",updated: null,_id: "62e88e5d761c0281c79e5970"},
			{compontName: "434",compontType: "",created: null,moduleId: "",remark: "",status: 1,tag: "434",uiType: "",updated: null,_id: "62e88e5d761c0281c79e5970"},
		]
		allDataList.forEach( t => {
				let mlComp = new ML_Component( t ) // 单个模块
				lists.push(mlComp)
		})
	return

	request.get('/lcap/compont/list',{}).then( r => {
		
		let arr: any[] = r.data

		lists.length = 0

		arr.forEach( t => {
			let mlComp = new ML_Component( t ) // 单个模块
			lists.push(mlComp)
		});

		
	})
}


init()





type handleEventType = 'add' | 'edit' | 'config' | ""
let handleEvent = ref<handleEventType>("") // 当前操作
// 根据当前操作 计算返回抽屉的标题
let drawerTitle = computed( () => {
	 if(handleEvent.value == 'add') return '新增';
	 if(handleEvent.value == 'edit') return '编辑';
	 if(handleEvent.value == 'config') return '配置';
})


let currentPage = ref<number>(1) // 当前分页
let ac_row_index = ref<number>(-1) // 当前行索引
// 如果有分页,需要处理下,当前操作对象的索引
let handel_index = computed( () => {
	return  ac_row_index.value >= 0 ? ac_row_index.value + ( (currentPage.value - 1) * 10) : -1
})
// 监听表格变化 , 分页
const table_change = ( r : any) => {
	currentPage.value = r.current as number
}



// 表格组件的按钮 监听点击
const table_action_click = ( r: any ) => {
	console.log( r )

	ac_row_index.value  = r.index
	

	// 表格-点击删除
	if(r.handleType == 'del') { 

		Modal.warning({
			title: '提醒',
			content: '确认删除该组件吗?',
			onOk : () => {
				del_temp( lists[handel_index.value]._id ) 
			}
		});

	}

	// 表格-点击新增
	if(r.handleType == 'add') { handleEvent.value = "add"; show_drawer.value = true; }

	// 表格-点击编辑
	if(r.handleType == 'edit') { handleEvent.value = "edit"; show_drawer.value = true; }

	// 表格-点击配置
	if(r.handleType == 'config') { handleEvent.value = "config"; show_drawer.value = true; }


}

// 抽屉关闭回调
const close_drawer = () => {

	console.log( '关闭抽屉' )
	show_drawer.value = false
	ac_row_index.value = -1
	handleEvent.value = ""

}




let drawerBody = ref() // 抽屉组件

type add_temp_type = { _id: string | number, compontName: string , tag : string, remark: string } // 修改组件需要的参数类型


// 抽屉的提交按钮点击
const submit_drawer = () => {

	console.log(handleEvent.value)

	// 新增
	if(handleEvent.value == "add") { add_temp(drawerBody.value?.addData as add_temp_type ); return }

	// 编辑
	if(handleEvent.value == "edit") { add_temp(drawerBody.value?.addData as add_temp_type); return }

	// 配置
	if(handleEvent.value == "config") { console.log(' config submit ....') ; return }

	console.log( lists[ handel_index.value ] )
	
}




// 组件 - 增


const add_temp = ( addData : add_temp_type): void =>{
	
	request.post('/lcap/compont/update', addData ).then( r => {
		
		message.success( handleEvent.value == 'add' ? '添加成功' : '修改成功' );
		show_drawer.value = false
		init()
		ac_row_index.value = -1 ; 
	})
}

// 组件 - 删
const del_temp = ( _id : string | number ) : void => {
	
	request.post('/lcap/compont/delete', { _id } ).then( r => {
		
		message.success('删除成功');
		lists.splice( handel_index.value , 1); 
		ac_row_index.value = -1 ; 

	})
}




</script>
<style lang="less">
.ant-drawer-body {
	padding: 0px !important;
}
</style>